<template>
	<view class="container">
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<image class="avatar" :src="userInfo.user_pic || '/static/logo.png'" mode="aspectFill"></image>
			<view class="user-info">
				<view class="phone" v-if="userInfo && userInfo.phoneNum">{{ userInfo.phoneNum }}</view>
				<view class="login-btn" @click="navigateTo('/pages/login/login')" v-else>点击登录</view>
			</view>
			<view class="settings" @click="navigateTo('/pages/mySet/mySet')">
				<text class="iconfont icon-mti-shezhi"></text>
			</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<!-- 申请接单 -->
			<view class="menu-item" @tap="navigateTo('/pages/apply/apply')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/images/订单1.png"></image>
					<text class="menu-text">申请接单</text>
				</view>
				<image class="menu-arrow" src="/static/images/箭头.png"></image>
			</view>

			<!-- 提示文本 -->
			<view class="notice-box">
				<text class="notice-text">问题请点击微信客服复制微信添加好友</text>
			</view>

			<!-- 微信客服 -->
			<view class="menu-item" @tap="contactService">
				<view class="menu-left">
					<image class="menu-icon" src="/static/images/微信图标.png"></image>
					<text class="menu-text">微信客服</text>
				</view>
				<image class="menu-arrow" src="/static/images/箭头.png"></image>
			</view>

			<!-- 关于我们 -->
			<view class="menu-item" @tap="navigateTo('/pages/aboutAs/aboutAs')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/images/关于我们.png"></image>
					<text class="menu-text">关于我们</text>
				</view>
				<image class="menu-arrow" src="/static/images/箭头.png"></image>
			</view>

			<!-- 投诉建议 -->
			<view class="menu-item" @tap="navigateTo('/pages/proposal/proposal')">
				<view class="menu-left">
					<image class="menu-icon" src="/static/images/投诉建议.png"></image>
					<text class="menu-text">投诉建议</text>
				</view>
				<image class="menu-arrow" src="/static/images/箭头.png"></image>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-button" @tap="logout" v-if="userInfo">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			contactService() {
				uni.setClipboardData({
					data: 'wx13766666666',
					success: () => {
						uni.showToast({
							title: '微信号已复制',
							icon: 'none'
						})
					}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync()
							this.userInfo = null
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = userInfo
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
		
		.user-header {
			padding: 40rpx 30rpx;
			background: linear-gradient(to right, #4a90e2, #5c9ee6);
			display: flex;
			align-items: center;
			position: relative;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255,255,255,0.4);
			}
			
			.user-info {
				margin-left: 30rpx;
				flex: 1;
				
				.phone {
					color: #fff;
					font-size: 36rpx;
					font-weight: 500;
				}
				
				.login-btn {
					color: #fff;
					font-size: 32rpx;
					padding: 10rpx 0;
				}
			}
			
			.settings {
				padding: 20rpx;
				
				.icon-shezhi {
					color: #fff;
					font-size: 40rpx;
				}
			}
		}
		
		.menu-list {
			margin: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
			
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				
				.menu-left {
					display: flex;
					align-items: center;
					
					.menu-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					
					.menu-text {
						font-size: 28rpx;
						color: #333;
					}
				}
				
				.menu-arrow {
					width: 30rpx;
					height: 30rpx;
					opacity: 0.6;
				}
			}
			
			.notice-box {
				padding: 20rpx 30rpx;
				background-color: #f0f7ff;
				
				.notice-text {
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
		
		.logout-button {
			margin: 60rpx 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ff4d4f;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
			box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.2);
			
			&:active {
				opacity: 0.9;
			}
		}
	}
</style>
